<!--
 * @Author: zhoupei
 * @LastEditTime: 2023-06-16 19:55:29
 * @Description: Title
-->
<template>
    <div class="common-layout">
        <el-container>
            <el-container>
                <el-header>
                    <div>
                        <h2 style="color: black; font-size: 15px;margin-left: -15px;">需求描述
                        </h2>
                    </div>
                </el-header>
                <el-aside width="99%" style="margin-top:-35px">
                    <div>
                        <el-input maxlength="500" show-word-limit v-model="message" type="textarea"
                            input-style=" height: 110px; color: black;font-size:20px;"
                            placeholder="输入你的问题，让AI帮你思考并总结，例如:青椒炒肉的做法" />
                    </div>
                </el-aside>
                <el-aside width="99%">
                    <div style="border: 1px solid black;">
                        <el-button @click="commit" :icon="Edit" type="primary"
                            style="font-size: 18px; font-weight: bold;background-color: rgb(202, 197, 247); color:rgb(5, 116, 180);width: 100%;height: 60px;"
                            :loading="commitLoading">生成思维导图内容</el-button>
                    </div>
                </el-aside>
                <el-aside width="99%">
                    <el-row>
                        <el-col :span="12">
                            <div style="border: 1px solid black;">
                                <el-button @click="copyText" :icon="DocumentCopy" type="primary"
                                    style="font-size: 15px; font-weight: bold;background-color: rgb(6, 128, 209); color:rgb(255, 255, 255);width: 100%;height: 60px;">复制
                                    Markdown</el-button>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div style="border: 1px solid black;">
                                <el-button @click="clearText" :icon="DocumentRemove" type="primary"
                                    style="font-size: 15px; font-weight: bold;background-color: rgb(6, 128, 209); color:rgb(255, 255, 255);width: 100%;height: 60px;">清空</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-header>
                    <div>
                        <el-row>
                            <el-col :span="21">
                                <h2 style="color:black; font-size: 15px;margin-left: -15px;">
                                    生成内容
                                </h2>
                            </el-col>
                            <el-col :span="3" :push="2">
                                <el-link @click="demoClick" type="primary"
                                    style="font-size: 13px;font-weight: bold;">示例</el-link>
                            </el-col>
                        </el-row>
                    </div>
                </el-header>
                <el-aside width="99%" style="margin-top:-35px">
                    <div>
                        <el-input show-word-limit v-model="txtValue" ref="valueRef" type="textarea"
                            input-style="height: 585px; color: black;font-size:20px;" placeholder="请用文字描述你想要生成的内容,需要按照规范" />
                    </div>
                </el-aside>

            </el-container>
            <el-aside width="80%">
                <div>
                    <el-row>
                        <el-col :span="24">
                            <div style="border: 1px solid rgb(206, 205, 205); padding-left: 12px;height: 870px">
                                <svg style="height: 100%; width: 100%" class="flex-1" ref="svgRef"></svg>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-aside>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, watch } from 'vue';
import { Edit, DocumentCopy, DocumentRemove } from '@element-plus/icons-vue';
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view/dist/index.js';
import { ElInput } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useWebSocketStore } from '@/store';

const store = useWebSocketStore()

let commitLoading = ref(false);
const transformer = new Transformer();
const mm = ref()
const value = ref('')
const txtValue = ref('')
const message = ref('')
const svgRef = ref()
const valueRef = ref<HTMLInputElement>()
const update = () => {
    const { root } = transformer.transform(value.value);
    mm.value.setData(root);
    mm.value.fit();
}

watch(() => value.value, (n) => {
    // 监听输入变化更新思维导图
    update()
})
onMounted(() => {
    // 初始化markmap思维导图
    mm.value = Markmap.create(svgRef.value);
    // 更新思维导图渲染
    update();
    store.connect();
})
// 提交
const commit = async () => {
    if (message.value == '') {
        ElMessage({
            message: '请填写需求描述',
            type: 'error',
        })
        return false;
    }
    commitLoading.value = true;
    txtValue.value = ``;
    value.value = ``;
    // 等待send方法执行完毕
    store.send(message.value, (data: string) => {
        if(data =='done'){
            commitLoading.value = false;
        value.value = txtValue.value;
        }else{
            txtValue.value = data;
        }
    });
};
// 示例
const demoClick = async () => {
    message.value = '青椒炒肉的做法';
    txtValue.value = ` # 青椒炒肉
## 主料
- 瘦肉片
- 青椒

## 辅料
- 姜蒜末
- 料酒
- 生抽
- 盐
- 白胡椒粉

## 步骤
1. 将瘦肉片切成适当大小的块，加入料酒、盐和白胡椒粉腌制10分钟。
    - 可以根据个人口味加入一些其他调料。
2. 将青椒洗净后切成条状备用。
3. 热锅凉油，放入姜蒜末爆香。
4. 加入腌制好的瘦肉块快速翻炒至变色。
5. 加入青椒条继续翻炒，同时加入生抽调味。
6. 翻炒至青椒变软即可出锅。

## 注意事项
- 腌制时间不宜过长，否则会影响口感。
- 翻炒时火候要掌握好，避免过度焦糊或者未完全熟透。
`;
    value.value = txtValue.value;
}
const copyText = () => {
    const input = valueRef.value
    if (input) {
        input.select()
        document.execCommand('copy')
        ElMessage({
            message: '复制成功',
            type: 'success',
        })
    }
};
const clearText = () => {
    message.value = '';
    txtValue.value = ``;
    value.value = ``;
};
</script>

<style scoped></style>